
<!-- 科目管理 -->
<template>
  <div class="subject_management_container">
    <div class="search_box">
      <div class="btn btn_add" @click="showPopup('ruleForm')">
        <i class="el-icon-plus"></i>
        <span class="btn_txt">新增</span>
      </div>
      <div  class="fr" >
        <el-input placeholder="请输入科目名称" size="small" v-model="subjectName" @keyup.enter.native="searchData(subjectName)">
          <div slot="append" class="btn_search" @click="searchData(subjectName)">查询</div>
        </el-input>
      </div>
      <div class="clear"></div>
    </div>
    <div class="table_box special_table_box">
      <adminTable :tableHead="tableHead" :tableData="tableData"></adminTable>
      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.curPage"
        :page-sizes="[10, 20, 50]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.totalRows">
      </el-pagination>
    </div>


    <transition name="el-fade-in-linear">
      <div class="popup-container" v-show="popupState.showStatus">
        <div class="popup mini">
          <i class="el-icon-error icon_close" @click="popupState.showStatus = false"></i>
          <div class="title">{{popupState.popupName}}</div>

          <div class="content">
            <el-form :model="formData" ref="ruleForm" :rules="rules" label-position="left" style=""
              label-width="90px" class="form">
              <div style="overflow:hidden">
                <el-form-item label="科目名称 : " prop="subjectName" style="width: 100%" size="small" class="fl">
                  <el-input v-model="formData.subjectName" autocomplete="off"  placeholder="请输入科目名称"></el-input>
                </el-form-item>
                <el-form-item label="课时费（元/节） : " prop="subjectPrice"  style="width: 100%" size="small" class="fl line_height_16">
                  <el-input v-model.number="formData.subjectPrice" autocomplete="off"></el-input>
                </el-form-item>

              </div>

            </el-form>

            <div class="btn_box">
              <div class="btn btn_add" v-if="popupState.popupName == '新增科目'" @click="submitAdd('ruleForm')">
                <span class="btn_txt">保存</span>
              </div>

              <div class="btn btn_add" v-if="popupState.popupName == '编辑科目'" @click="submitEdit('ruleForm')">
                <span class="btn_txt">保存</span>
              </div>
            </div>

          </div>
        </div>
      </div>
    </transition>
  </div>
</template>


<style scoped>

</style>

<script>
import adminTable from '@/components/assembly/adminTable'

import {
  createNamespacedHelpers
} from "vuex";
let {
  mapState,
  mapGetters,
  mapMutations,
  mapActions
} = createNamespacedHelpers("subjectManagement");
export default {
  name: 'subjectManagement',
  data() {
    return {
      subjectName: '',
      checkStatus: false,
      schoolId: '',
      page: {
        curPage : 0,
        pageSize: 0,
        totalRows: 0,
      },
      formData: {
        subjectName: '',
      },
      popupState: {
        showStatus: false,
        popupName: '新增科目',
      },
      tableHead: {
        // border: true,
        // order: true,
        setFunction: [
          {
            fun: this.tableDelete,
            name: "删除"
          },
        ],
        data: [
          {
            name: '科目名称',
            key: 'subjectName',
            align: 'center',
          },
          {
            name: "课时费（元/节）",
            key: "subjectPrice",
            align: "center"
          },
        ]
      },
      tableData: [],
      
      rules: {
        subjectName: [
          { required: true, message: '请输入科目名称', trigger: 'blur' },
        ],
        subjectPrice: [
          { required: true, message: '请输入课时费', trigger: 'blur' },
        ],
      }

    }
  },
  created() {
    this.initData();
  },
  // watch: {
  //   mapPowerList: {
  //     handler(newName, oldName) {
  //     },
  //     immediate: true,
  //     deep: true
  //   }
  // },
  
  methods: {
    ...mapMutations([
      "updateInfo",
    ]),
    ...mapActions([
      "formGet",
      "post"
    ]),

    // 获取列表
    initData(subjectName) {
      subjectName = subjectName || this.subjectName || '';
      let data = {
        subjectName: subjectName,
        curPage: this.page.curPage,
        pageSize: this.page.pageSize,
      }
      this.post({
        API: 'selectBmSubjectPageList',
        data: data
      }).then(res => {
        this.tableData = res.data;
        this.page = res.page;
      }).catch(err => {
        this.$message.error(err);
      })
    },

    searchData(subjectName) {
      this.page.curPage = 1;
      this.initData(subjectName)
    },


    showPopup(formName) {
      this.$refs[formName].resetFields();   // 初始化
      this.formData = {}

      this.popupState = {
        showStatus: true,
        popupName: '新增科目',
      }

    },

    // 新增提交
    submitAdd(formName) {
      let data = this.formData;

      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.post({
            API: 'insert',
            data: data
          }).then(res => {
            console.log(res)
            if(res == 1) {
              this.$message.success('新建成功')
              this.initData();
              this.popupState.showStatus = false;
            }
          }).catch(err => {
            this.$message.error(err);
          })
        } else {
          // console.log('error submit!!');
          return false;
        }
      });

      
    },

    // 编辑提交
    submitEdit(rowData) {
      let data = this.formData
      data.schoolId = this.schoolId;
      this.post({
        API: 'update',
        data: data
      }).then(res => {
        this.$message.success('修改成功');
        this.initData();
        this.popupState.showStatus = false;
      }).catch(err => {
        this.$message.error(err);
      })
    },


    // 表格删除
    tableDelete(rowData) {
      let subjectId = rowData.row.subjectId;
      let data = {
        id: subjectId,
      }

      this.$confirm('是否删除该科目?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.formGet({
          API: 'deleteById',
          data: data
        }).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.initData();
        }).catch(err => {
          this.$message.error(err);
        })
        
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });

      
      
    },



    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page.pageSize = val;
      this.initData();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.page.curPage = val;
      this.initData();
    }
    
  },
  computed: {
    ...mapState([
    ]),
    // ...mapGetters(["selectedIds"])
  },
  components: {
    adminTable,
  },
}

</script>